<template>
	<div class="photoinfo-container">
		<h3>{{ title }}</h3>
		<p class="subtitle">
			<span>发表时间：{{Date.now() | dateFormat}}</span>
			<span>点击：{{ new Date().getSeconds() }} 次</span>
		</p>
		<hr />
		<!-- 图片缩略图 -->
		<!-- 使用 vue-preview 进行展示 -->
		<div class="thumbs">
			<vue-preview :slides="list" @close="handleClose"></vue-preview>
		</div>
		
		<!-- 图片内容区域 -->
		<div class="photoinfo-content">
			<p>以下内容与图片没有任何关系，只是我随便着找的文字。</p>
			故宫、长城、周口店北京人遗址、天坛、颐和园、明十三陵、什刹海、圆明园、芦沟桥、
			慕田峪长城、司马台长城、金山岭长城、居庸关长城、箭扣长城、恭王府花园、北京大学、胡同、
			北京动物园、北京植物园、潘家园古董市场、古观象台、德胜门、正阳门、景山、香山、钟楼、鼓楼。
			冰糖葫芦:从800年前的宋代流传至今的美食北京是有着千年历史的国家历史文化名城。
		</div>
		<!-- 评论组件 -->
		<cmt-box></cmt-box>
	</div>
</template>

<script>
	import {Toast} from 'mint-ui'
	import Comment from '../subcomponents/Comment.vue'
	export default {
		data(){
			return {
				id:this.$route.params.id,
				title:"",
				list:[]
			}
		},
		created() {
			this.getPhotoInfo();
		},
		methods:{
			getPhotoInfo(){
				this.$http.get('../../data/photolist.json').then(result => {
					var body = result.body;
					if(body.length>0){
						var arr = body.filter(item => {
							return item.cateid == this.id;
						})
						//图片缩略图要求的数据格式中，有一些必备的字段值，在这里进行循环赋值
						arr.forEach(item => {
							item.w = 600;
							item.h = 500;
							item.src= item.url;
							item.msrc = item.url;
						})
						this.list = arr;
						this.title = arr[0].title;
					}
				},err => {
					Toast("获取图片详情失败")
				})
			},
			handleClose(){
				console.log("点击关闭")
			}
		},
		components:{
			"cmt-box":Comment
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.photoinfo-container{
		padding: 3px 5px;
		h3{
			color: #26a2ff;
			font-size: 18px;
			text-align: center;
			padding: 10px 0px;
		}
		.subtitle{
			display: flex;
			justify-content: space-between;
		}
		.photoinfo-content{
			font-size: 15px;
			line-height: 28px;
		}
	}
</style>
